<template>
	<div class="app-lock-screen">
		<LockOutlined @click="handleClick" />
		<a-modal
			:title="$t('function.lockscren.lock')"
			v-model:visible="showModal"
			width="30%"
		>
			<a-form :model="form" autocomplete="off">
				<a-form-item
					:label="$t('function.lockscren.label')"
					name="password"
					:rules="rules.password"
				>
					<a-input
						v-model:value="form.password"
						:placeholder="$t('function.lockscren.placeholder')"
					></a-input>
				</a-form-item>
			</a-form>
			<template #footer>
				<a-button
					class="lock-scren-footer-btn"
					type="primary"
					@click="handleLock"
					>{{ $t('function.lockscren.confirmbuttontext') }}</a-button
				>
			</template>
		</a-modal>
	</div>
</template>

<script setup lang="ts">
import { Form } from 'ant-design-vue';
import { LockOutlined } from '@ant-design/icons-vue';
import { useRoute, useRouter } from 'vue-router';
import { IProjectSetting } from '@/core/interface/app/i-project-setting';
const route: any = useRoute();
const { push } = useRouter();

let showModal = ref<boolean>(false);
const form = reactive({ password: '' });
const useForm = Form.useForm;
const rules = reactive({
	password: [
		{
			required: true,
			message: `${App.ts('function.lockscren.message', '锁屏密码不能为空！')}!`,
		},
	],
});

const handleLock = () => {
	const { validate } = useForm(form, rules);
	validate(['password'])
		.then((result) => {
			if (result) {
				const password = window.btoa(form.password);
				sessionStorage.setItem('lockPassword', password);
				sessionStorage.setItem('lockState', 'true');
				push({
					path: '/lock',
					query: { redirect: window.location.hash.replace('#', '') },
				});
			}
		})
		.catch(() => {
			App.getNotificationHelper().error(
				App.ts('function.generic.error', '错误'),
				App.ts('function.lockscren.placeholder', '请输入锁屏密码')
			);
		});
};

const handleClick = () => {
	showModal.value = true;
};
</script>
